<template>
  <div class="goods">
    <div class="slider" ref="menuList">
      <div>
        <div
          class="menu"
          @click="selectMenu(i,$event)"
          :class="{active: i === currentIndex}"
          v-for="(item,i) in goods"
          :key="i"
        >
          <span class="text">
            <v-discount
              v-if="item.type !== -1 "
              :width="24"
              :height="24"
              :imgType="item.type"
              :size="3"
            ></v-discount>
            {{item.name}}
          </span>
        </div>
      </div>
    </div>
    <div class="main-wrap" ref="goodsList">
      <div>
        <div v-for="(child ,i) in goods" :key="i" class="goods-item-hook">
          <div class="title">{{child.name}}</div>
          <div
            class="goods-item"
            v-for="(item ,i) in child.foods"
            :key="i"
            @click="selectGoods(item)"
          >
            <div class="logo">
              <img :src="item.icon" alt />
            </div>
            <div class="info">
              <h2 class="name">{{item.name}}</h2>
              <p class="type" v-if="item.description">{{item.description}}</p>
              <div class="total">
                <span class="desc">月售{{item.sellCount}}份</span>
                <span class="extra">好评率{{item.rating}}</span>
              </div>
              <div class="price">
                <span class="newPrice">
                  <span class="doler">¥</span>
                  {{item.price}}
                </span>
                <span v-show="item.oldPrice" class="oldPrice">¥{{item.oldPrice}}</span>
              </div>
              <div class="cartcontrol-wrap">
                <cart-control
                  @drop="$emit('drop',$event)"
                  @setSelectFoods="bandleSelectFoods"
                  :food="item"
                ></cart-control>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <good-detail @handleSelectFoods="bandleSelectFoods" ref="goodsDetailRef" :goods="selectedGoods"></good-detail>
  </div>
</template>
<script>
import discount from '../Discount'
import cartControl from '../cartControl/CartControl'
import goodDetail from './GoodDetail'
import BScroll from 'better-scroll'
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      goods: [],
      sliderScroll: null,
      goodsScroll: null,
      goodsHeight: [],
      scrollY: 0,
      selectedGoods: {},
      isShowDetail: false
    }
  },
  components: {
    vDiscount: discount,
    cartControl,
    goodDetail
  },
  created() {
    this.getList()
  },
  computed: {
    currentIndex() {
      return this.goodsHeight.findIndex(
        (v, i) => this.scrollY >= v && this.scrollY < this.goodsHeight[i + 1]
      )
    }
  },
  methods: {
    ...mapMutations(['setSelectFoods']),
    selectGoods(goods) {
      this.selectedGoods = goods
      this.$refs.goodsDetailRef.show()
    },
    bandleSelectFoods() {
      var fullFoods = []
      this.goods.forEach(f => {
        f.foods.forEach(item => {
          if (item.count && item.count > 0) {
            fullFoods.push(item)
          }
        })
      })
      this.setSelectFoods(fullFoods)
    },
    initBScroll() {
      this.sliderScroll = new BScroll(this.$refs.menuList, {
        click: true
      })
      this.goodsScroll = new BScroll(this.$refs.goodsList, {
        probeType: 3,
        click: true
      })
      this.goodsScroll.on('scroll', pos => {
        this.scrollY = Math.abs(Math.round(pos.y))
      })
    },
    selectMenu(i) {
      // 1.获取右侧DOM元素集合列表
      var el = this.$refs.goodsList.getElementsByClassName('goods-item-hook')[i]
      this.goodsScroll.scrollToElement(el)
      // 浏览器原生事件没有 constructed 这个属性
      // console.log(i)
      // var height = this.goodsHeight[i]
      // var goodsEl = this.goods
      // if (!event._constructed) {
      //   return false
      // }
      // 如果是自定义派发事件
      // this.currentIndex = i
    },
    calculateHeight() {
      var goodsList = this.$refs.goodsList.getElementsByClassName(
        'goods-item-hook'
      )
      var height = 0
      this.goodsHeight.push(height)
      goodsList.forEach(item => {
        height += item.clientHeight
        this.goodsHeight.push(height)
      })
      console.log(this.goodsHeight)
    },
    async getList() {
      const { data: res } = await this.$http.get('goods')
      this.goods = res.data
      // DOM发生变化的回调函数
      this.$nextTick(() => {
        this.initBScroll()
        this.calculateHeight()
      })
      console.log(this.$refs.menuList)
    }
  }
}
</script>
<style lang="stylus" scoped>
.goods {
  position: absolute;
  width: 100%;
  top: 3.48rem;
  bottom: 0.92rem;
  display: flex;
  overflow: hidden;

  .slider {
    flex: 0 0 80px;
    width: 80px;
    background-color: #f3f5f7;
    box-sizing: border-box;

    .menu {
      display: table;
      height: 54px;
      width: 56px;
      line-height: 14px;
      text-align: center;
      padding: 0 12px;

      &.active {
        position: relative;
        z-index: 10;
        margin-top: -1px;
        background-color: #fff;
        font-weight: 700;
      }

      .text {
        display: table-cell;
        width: 56px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);
        font-size: 12px;
        text-align: left;
      }

      1;
    }

    text-align: center;
  }

  .main-wrap {
    flex: 1;

    .title {
      height: 0.52rem;
      font-size: 0.24rem;
      line-height: 0.52rem;
      padding-left: 0.28rem;
      border-left: 2px solid #d9dde1;
      background-color: #f5f3f7;
      color: rgb(147, 153, 159);
    }

    .goods-item {
      padding: 0.36rem;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      display: flex;

      &:last-child {
        border-bottom: none;
        padding-bottom: none;
      }

      .logo {
        flex: 0 0 1.16rem;
        margin-right: 0.2rem;

        img {
          height: 1.16rem;
          width: 1.16rem;
        }
      }

      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;

        .name {
          font-size: 0.28rem;
          color: rgb(7, 17, 27);
          font-weight: 700;
          line-height: 0.28rem;
          margin-bottom: 0.16rem;
        }

        .type {
          font-size: 0.2rem;
          color: rgb(147, 153, 159);
          line-height: 0.24rem;
          margin-bottom: 0.16rem;
        }

        .total {
          font-size: 0.2rem;
          color: rgb(147, 153, 159);
          margin-bottom: 0.16rem;

          .desc {
            margin-right: 0.24rem;
          }
        }

        .price {
          .newPrice {
            color: red;
            font-size: 0.28rem;
            font-weight: 700;

            .doler {
              font-size: 0.2rem;
              font-weight: normal;
            }
          }

          .oldPrice {
            color: rgb(147, 153, 159);
            font-weight: 700;
            font-size: 0.2rem;
            text-decoration: line-through;
          }
        }

        .cartcontrol-wrap {
          position: absolute;
          right: 0;
          bottom: -0.24rem;
        }
      }
    }
  }
}
</style>
